<template>
	<view class="update_wrapper">
		<view class="logo_wrap">
			<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/appLogo.png"></image>
			<text>PCD Cloud</text>
		</view>
		<view class="version_wrap">
			<text class="version_title">最新版本:</text>
			<text>{{appVersionInfo.app_version}}</text>
		</view>
		<view class="update_wrap">
			<view class="content_title">更新内容:</view>
			<view class="content_wrap">
				<rich-text :nodes="appVersionInfo.info"></rich-text>
			</view>
		</view>
		<view class="update_handle">
			<button size="mini" @click="onUpdateCancel">取消</button>
			<button size="mini" @click="onUpdateBtn">更新</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appVersionInfo: {} // 版本更新数据
			}
		},
		onLoad() {
			this.appVersionInfo = uni.getStorageSync('app_version');
		},
		methods: {
			// 监听更新按钮
			onUpdateBtn() {
				// 去掉更新标志位
				uni.removeStorageSync('is_update_prompt');
				this.$api.getDownloadUrl({}, res => {
					if (res.data.type === 'ok') {
						// 获得地址
						let server = res.data.message
						// 打开地址
						plus.runtime.openURL(server);
					}
				})
			},
			// 监听取消按钮
			onUpdateCancel() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.update_wrapper {
		height: 100vh;
		padding: 0 40upx;
		font-size: 14px;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.logo_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 278upx;
			height: 240upx;
		}

		text {
			font-size: 18px;
		}
	}

	.version_wrap {
		display: flex;
		align-items: center;
		margin-top: 40upx;

		text {
			font-size: 14px;
		}

		.version_title {
			width: 70px;
			margin-right: 20upx;
			font-size: 15px;
		}
	}

	.update_wrap {
		margin-top: 20upx;

		.content_title {
			flex-shrink: 0;
			width: 70px;
			margin-right: 20upx;
			font-size: 15px;
		}

		.content_wrap {
			display: flex;
			flex-direction: column;
			margin-top: 20upx;

			text {
				margin-bottom: 10upx;
				font-size: 14px;
			}
		}
	}

	.update_handle {
		position: fixed;
		bottom: 100upx;
		left: 12%;
		display: flex;

		button {
			width: 280upx;
			height: 70upx;
			line-height: 70upx;
			border-radius: 70upx;
		}

		button:first-child {
			border: 1px solid #25263D;
			margin-right: 40upx;
		}

		button:last-child {
			background-color: #E03E4D;
			color: #FFFFFF;
		}
	}
</style>
